<script lang="ts" setup>
import {useRoute} from 'vue-router'
import {ref} from "vue"
import {getProduct, postProduct, putProduct} from "../serve"
import JsImages from "./js-images.vue"
import {FileToBase64} from "../utils"
import {ElMessage} from "element-plus";

const
    route = useRoute(),
    fromData = ref({
      id: '',
      "image": "",
      "sliderImage": [],
      "storeName": "",
      "storeInfo": "",
      "price": '',
      "isShow": true
    }),
    loading = ref(false),
    isAdd = ref(false),
    fromRules = {
      storeName: [
        {
          required: true,
          min: 1,
          max: 15,
          message: '鲜花名称长度1-15位',
          trigger: 'trigger',
        },
      ],
      storeInfo: [
        {
          required: true,
          min: 1,
          max: 200,
          message: '鲜花介绍长度5-200位',
          trigger: 'trigger',
        },
      ],
      price: [
        {
          required: true,
          min: 1,
          max: 15,
          message: '请输入价格',
          trigger: 'trigger',
        },
      ],
      image: [
        {
          required: true,
          min: 10,
          message: '请选择鲜花图片',
          trigger: 'trigger',
        },
      ],
      sliderImage: [
        {required: true, type: "array", min: 1, max: 6, message: "请上传1-5张图片", trigger: ["blur", "change"]}
      ],
      isShow: [
        {
          required: true,
          trigger: 'trigger',
        },
      ],
    },
    froms = ref(),
    inImage = ref(false)
;

function get() {
  if (route.query['id']) {
    loading.value = true
    isAdd.value = false
    getProduct(route.query['id']).then((r: any) => {
      r['sliderImage'] = JSON.parse(r['sliderImage'])
      fromData.value = r
      loading.value = false
      inImage.value = true
    }).catch(() => loading.value = false)
  } else {
    isAdd.value = true
  }
}

get()

function loadFile(e: any) {
  loading.value = true
  FileToBase64(e).then((r: any) => {
    fromData.value.image = r
    loading.value = false
  })
}

function loadFileList(e: any) {
  fromData.value.sliderImage = e['urlArr']
}

async function change() {
  try {
    await froms.value.validate()
    if (isAdd.value){
      postProduct({...fromData.value}).then(() => {
        ElMessage({type: 'success', message: '新增成功！'})
      }).catch(() => ElMessage({type: 'error', message: '新增失败！'}))
      return
    }
    putProduct({...fromData.value}).then(() => {
      ElMessage({type: 'success', message: '修改成功！'})
      get()
    }).catch(() => ElMessage({type: 'error', message: '修改失败！'}))
  } catch (e) {
  }
}

function deleteChange() {
  fromData.value.image = ' '
}
</script>

<template>
  <el-scrollbar>
    <el-card v-loading="loading" box element-loading-text="加载中...">
      <template #header>{{ isAdd ? '鲜花信息添加' : '鲜花信息编辑' }}</template>
      <el-form ref="froms" :model="fromData" :rules="fromRules" el-From>
        <el-form-item label="鲜花名称：" prop="storeName">
          <el-input v-model="fromData['storeName']" maxlength="15" placeholder="请输入鲜花名称"/>
        </el-form-item>
        <el-form-item label="鲜花介绍：" prop="storeInfo">
          <el-input v-model="fromData['storeInfo']" maxlength="200" placeholder="请输入鲜花介绍" rows="2"
                    type="textarea"/>
        </el-form-item>
        <el-form-item label="鲜花价格：" prop="price">
          <el-input v-model="fromData['price']" placeholder="请输入鲜花价格" type="number"/>
        </el-form-item>
        <el-form-item label="鲜花图片：" prop="image">
          <jsImages v-if="isAdd ? true : inImage" :picUrl="fromData.image" @myPicFile="loadFile"
                    @delete-change="deleteChange"/>
        </el-form-item>
        <el-form-item label="轮播图片：" prop="sliderImage">
          <jsImages v-if="isAdd ? true : inImage" :fileMultiple="true"
                    :pic-url="fromData.sliderImage"
                    @myPicFile="loadFileList" @delete-change="(e:any)=>fromData.sliderImage = e['urlArr']"/>
        </el-form-item>
        <el-form-item label="是否上架：" prop="isShow">
          <el-switch v-model="fromData['isShow']" active-text="是" inactive-text="否" inline-prompt/>
        </el-form-item>
        <el-form-item>
          <el-button round style="width: 80%;margin: auto;" type="success" @click="change">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[box] {
  width: 50%;
  margin: auto;
}

[el-From] {
  width: 98%;
  margin: auto;
}
</style>